<template>
	<view class="control">
		<view class="section-2">
			<view class="title flex-align">
				<image mode="aspectFit"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/73284620fb094300df1379968d33a9f7314482a3.png">
				</image>
				<text style="font-size: 32rpx;">{{ticketData.venues[0].venue_name}}</text>
			</view>
			<view class="flex-between goods">
				<scroll-view class="footer-3" scroll-x>
					<view class="flex-align">
						<view class="item" v-for="(im,indexx) in selectionArr" :key="indexx">
							<!-- <view class="icon" @click="removeData(im,indexx)">
								<u-icon name="close-circle-fill" color="#000000" size="17"></u-icon>
							</view> -->
							<view class="item-time">{{im.month_day}}({{im.week}})</view>
							<view class="item-con">
								<view class="item-con1">{{im.num}}</view>
								<view class="item-con1">{{im.dateTimes}}</view>
							</view>
						</view>
					</view>

				</scroll-view>
			</view>
			<view style="width: 100%; height: 40rpx;">
				<view style="float: left; font-size: 26rpx;font-weight: 500;color: #000000;">
					{{ticketData.court_name}}
				</view>
				<view style="float: right; font-size: 26rpx;font-weight: 500;color: #000000;">
					X{{selectionlength}}
				</view>
			</view>

		</view>

		<view class="section-3 flex-between" v-if="goods_type != 'train'">
			<view class="info-1">商品总价</view>
			<view class="info-2">
				￥<text>{{ amount(money) }}</text>
			</view>
		</view>
		<view class="section-4 flex-between" @click="showCoupons = true" v-if="disabled_coupon == 0" >
			<u-image :src="`${assetsPath}f581f438df01f48c8ccc0794eb2f3408067b0e0f.png`" width="30rpx" height="30rpx"
				shape="square"></u-image>
			<view class="info-1" style="position: absolute; left: 0;margin-left: 14%;">优惠券<text style="color: #ff0000;" v-if="wrapperlist.length > 0">(当前可用{{wrapperlist.length}}张)</text></view>
			<view class="info-2 flex-align">
				<view class="info-3 active" v-if="yhj_qu">请选择</view>
				<view class="info-3 active" v-if="!yhj_qu">
					<text v-if="yhjtype == 1">满{{ yhjman }}元减{{yhjjian}}</text>
					<text v-if="yhjtype == 2">满{{ yhjman }}元减{{yhjjian}}</text>
					<text v-if="yhjtype == 3">满{{ yhjman }}元{{yhjjian}}折</text>
				</view>
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view>
		<view class="section-4 flex-between" @click="showAmount = true"  v-if="disabled_card_pay == 0" >
			<u-image :src="`${assetsPath}eb11c7b37ef576fcb06b117d02e002605ebd2d9b.png`" width="30rpx" height="30rpx"
				shape="square"></u-image>
			<view class="info-1" style="position: absolute; left: 0;margin-left: 14%;">充值卡<text style="color: #ff0000;" v-if="itemlist.length > 0">({{itemlist.length}}张)</text></view>
			<view class="info-2 flex-align">
				<view class="info-3 active" v-if="jinqian">请选择</view>
				<view class="info-3 active" v-if="!jinqian">剩余{{account_balance}}</view>
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view>
		<!-- <view class="section-4 flex-between" @click="showCoupons = true">
			<view class="info-1">优惠券</view>
			<view class="info-2 flex-align">
				<view class="info-3">暂无优惠券</view>
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view>
		<view class="section-4 flex-between" @click="showAmount = true">
			<view class="info-1">充值卡</view>
			<view class="info-2 flex-align">
				<view class="info-3 ">暂无充值卡</view>
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view> -->
		<!-- <view style="width: 100%;
    height: auto;
    background: #fff;
    padding: 1px 15rpx;
    margin-top: 20rpx;
    background-color: white;
    border-radius: 7rpx;">
			<view style="width: 100%;height: 40rpx;margin-top: 20rpx;font-size: 26rpx;
						font-weight: 500;
						color: #333333;">订单备注</view>
			<textarea placeholder=" 请填写订单备注信息，45字以内" class="input-textare" style=" margin-top: 20rpx;"
				v-model="order_remarks" />

		</view> -->



		<view class="section-5 flex-align">
			<label for="">
				<u-checkbox-group v-model="checked" placement="row" @change="checkboxChange" iconSize='20px'
					size='20px'>
					<u-checkbox label="我已阅读并同意" labelSize="13px" labelColor="#999999" checked="true"></u-checkbox>
				</u-checkbox-group>
			</label>

			<view class="info-1 flex-align">
				<!-- <text>我已阅读并同意</text> -->
				<view class="info-2" @click="showInfo = true" style="font-size: 26rpx;">《购买须知》</view>
			</view>
		</view>
		<view class="" style="width: 100%;height: 60rpx;">

		</view>
		<!-- ticket票  card卡  court场地  train培训班  enroll赛事-->
		<view>
			<view class="footer flex-between">
				<view class="footer-1 flex-align">
					合计：
					<view class="info">
						￥<text>{{ amount(totalPrice) }}</text>
					</view>
				</view>
				<view class="footer-btn" @click="$noMultipleClicks(submit)"> 提交订单 </view>
			</view>
		</view>
		<!-- 时间选择 -->
		<u-datetime-picker mode="time" :show="showTime" v-model="timeValue" @confirm="timeConfirm">
		</u-datetime-picker>
		<!-- 优惠卷弹窗 -->
		<!-- <u-datetime-picker mode="time" :show="showTime" v-model="timeValue" @confirm="timeConfirm">
		</u-datetime-picker> -->
		<u-popup @touchmove.stop :show="showCoupons" @close="closeCoupons" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">

			<view class="store-popup">
				<view class="title flex-between">
					<text>优惠券</text>
					<u-icon @click="closeCoupons1" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<!-- // q_type 平台1 场馆2 新人3 -->
				<!-- //type 代金券1 满减券2 折扣券3 -->
				<!-- <view class="list-1"> -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list-1" v-if="not_use == 0">
					<view class="item flex-align" v-for="(item,index) in wrapperlist" :key="index"
						@click="yhjlist(item)">
						<!-- 折扣券1 -->
						<view class="item-1" v-if="item.type == 1">
							<view class="price"> ￥<text>{{ item.jian }}</text> </view>
							<view class="price-1">满{{ item.man }}元可用</view>
						</view>
						<view class="item-2" v-if="item.type == 1">
							<view class="info-1">{{ item.name }}</view>
							<view class="info-2">有效期至：{{ item.expire_time }}</view>
						</view>
						<!-- 满减券2 -->
						<view class="item-1" v-if="item.type == 2">
							<view class="price"> ￥<text>{{ item.jian }}</text> </view>
							<view class="price-1">满{{ item.man }}元可用</view>
						</view>
						<view class="item-2" v-if="item.type == 2">
							<view class="info-1">{{ item.name }}</view>
							<view class="info-2">有效期至：{{ item.expire_time }}</view>
						</view>
						<!-- 折扣券3 -->
						<view class="item-1" v-if="item.type == 3">
							<view class="price"> {{ item.jian }}折</view>
							<view class="price-1">满{{ item.man }}元可用</view>
						</view>
						<view class="item-2" v-if="item.type == 3">
							<view class="info-1">{{ item.name }}</view>
							<view class="info-2">有效期至：{{ item.expire_time }}</view>
						</view>
					</view>
				</scroll-view>
				<!-- </view> -->
				<!-- <view class="btn">
					<u-button @click="showCoupons = false" type="primary" shape="circle" size="large" text="确定">
					</u-button>
				</view> -->
			</view>
		</u-popup>
		<!-- 充值卡 -->
		<!-- <u-popup @touchmove.stop :show="showAmount" @close="closeAmount" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15"> -->
		<u-popup @touchmove.stop :show="showAmount" @close="closeAmount" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">
			<view class="store-popup">
				<view class="title flex-between">
					<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
						@click="tabClick"></u-tabs>
					<u-icon @click="closeAmount1" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<!-- <view class="list-2" v-if="not_use == 0"> -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list-2" v-if="not_use == 0">
					<view class="item flex-align" v-for="(item,index) in itemlist" :key="index" @click="jine(item)">
						<view class="item-1">
							<view class="price"> ￥<text>{{item.account_balance}}</text> </view>
							<view class="price-1">剩余金额</view>
							<view class="price-1">No.{{item.cardno.substr(-4, 4)}}</view>
							<view class="price-1">{{amountFixed(item.pay_discount)}}折</view>
						</view>
						<view class="item-2">
							<view class="info-1" style="width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;">{{item.name}}</view>
							<!-- <view class="info-2">卡 号：{{item.cardno}}</view> -->
							<view class="info-2" style="width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;">{{ item.venue_name_new }}</view>

							<view class="info-2">有效期：{{item.yxq}}</view>
							<view class="info-2" style="width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;">使用范围：
								<text v-for="(items,indexs) in item.fanwei" :key="indexs" style="margin-left: 6rpx;">
									{{items}}
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="list-2" v-else>
					<!-- <view class="list-2" v-else> -->
					<view class="item flex-align" v-for="(item,index) in itemlist" :key="index">
						<view class="item-11">
							<!-- <view class="price"> ￥<text>{{item.account_balance}}</text> </view>
							<view class="price-1">剩余金额</view> -->
							<view class="price"> ￥<text>{{item.account_balance}}</text> </view>
							<view class="price-1">剩余金额</view>
							<view class="price-1">No.{{item.cardno.substr(-4, 4)}}</view>
							<view class="price-1">{{amountFixed(item.pay_discount)}}折</view>
						</view>
						<view class="item-2">
							<!-- <view class="info-1">{{item.name}}</view> -->
							<view class="info-1" style="width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;">{{item.name}}</view>
							<!-- <view class="info-2">卡 号：{{item.cardno}}</view> -->
							<view class="info-2" style="width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;">{{ item.venue_name_new }}</view>
							<view class="info-2">卡 号：{{item.cardno}}</view>
							<view class="info-2">有效期：{{item.yxq}}</view>
							<view class="info-2">不可用原因：{{item.reason}}</view>
						</view>
					</view>
					<!-- </view> -->
				</scroll-view>
			</view>
		</u-popup>

		<u-popup @touchmove.stop :show="showInfo" @close="closeInfo" closeOnClickOverlay mode="bottom" safeAreaInsetTop
			round="15">
			<view class="store-popup">
				<view class="title flex-between">
					<text>用户须知</text>
					<u-icon @click="closeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<u-parse :content="ticketData.user_instruction"></u-parse>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	const market = require("@/api/market/index.js");
	export default {
		data() {
			return {
				noClick: true,
				assetsPath: this.$https.assetsPath,
				tabActive: 0,
				num: 0,
				checked: [],
				showTime: false,
				showCoupons: false,
				couponsValue: 0,
				showAmount: false,
				showInfo: false,
				timeValue: `${new Date().getHours()}:${new Date().getMinutes()}`,
				ticketID: 0,
				ticketData: {},
				venue_name: "",
				amountValue: 1,
				read_checked: true,
				venue_id: 0,
				goods_type: "",
				spec: "",
				classNum: 0,
				train_price: "0.00",
				students: [],
				order_remarks: '',
				pay_wait_time: '00:15:00',
				selectionArr: [], //上一个页面传过来得数组
				money: '', //总价
				selectionlength: '', //数量
				class_id: '',
				price_list: [],
				field_list: [],
				current_month: '',
				field_type: '',
				time_id: [],
				field_id: [],
				num_list: [],
				order_id: '',
				money: 0,
				itemlist: [],
				jek: true,
				not_use: 0,
				skulist: {},
				datalist: {},
				payWaitTime: '00:15:00',
				showAmount: false,
				jinqian: true,
				windows: '',
				list1: [{
						name: "当前可用"
					},
					{
						name: "不可用"
					},
				],
				account_balance: '',
				goods_list: true,
				money_s: '',
				pay_discount: '',
				yhj_balance: '', //优惠卷
				yhj_qu: true,
				wrapperlist: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 999,
				},
				totalPage: '', //几页
				yhjman: '',
				yhjjian: '',
				yhjtype: '',
				yhjid: '',
				pay_discount: "",
				totalPrice: '',
				id:'',
				disabled_coupon:0,
				disabled_card_pay:0,
				coach:0
			};
		},
		onLoad(options) {
			this.class_id = options.class_id

			const selectionArrs = JSON.parse(decodeURIComponent(options.selectionArr))
			this.selectionArr = selectionArrs
			this.selectionlength = this.selectionArr.length
			// let sum = 0;
			let price_list = []
			let field_list = []
			let price_id = []
			let time_id = []
			let field_id = []
			let num_list = []
			selectionArrs.forEach(item => {
				let money = this.money + parseFloat(item.price)
				this.money = money
				this.totalPrice = money
				// sum += parseInt(item.price);
				price_list.push(item.price)
				field_list.push(item.field)
				price_id.push(item.price_id)
				time_id.push(item.time_id)
				field_id.push(item.field_id)
				num_list.push(item.num)
			})
			this.price_list = price_list
			this.field_list = field_list
			this.num_list = num_list
			this.price_id = price_id
			this.time_id = time_id
			this.field_id = field_id
			// this.money = sum
			this.field_type = this.selectionArr[0].text
			this.windows = this.selectionArr[0].windows
			this.court_id = this.selectionArr[0].court_id
			this.meal_id = this.selectionArr[0].meal_id
			this.current_month = this.selectionArr[0].current_month
			this.getShopTicket();
			this.getPriceCardForPay();
			// this.orderSure()
			this.getCardPayConf()

		},
		onShow() {
			this.ss()
		},
		methods: {
			async getCardPayConf() {
				let that = this
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				let postData = {
					type:3
				};
				let res = await venues.getCardPayConf(postData); ///api/conf/coach
				if (res.code == 1) {
					uni.hideLoading();
					this.coach = res.data.coach
					this.disabled_card_pay = res.data.disabled_card_pay
					this.disabled_coupon = res.data.disabled_coupon
					
				}
			},
			//优惠卷
			yhjlist(item) {
				this.showCoupons = false
				// ticket票  card卡  court场地  train培训班
				if (Number(this.amount(this.money)) < item.man) {
					return uni.showToast({
						title: "优惠卷不可使用",
						icon: "none",
					});
				} else {
					// this.money = ''
					this.jingeka = ''
					this.id = ''
					this.jinqian = true
					this.yhj_qu = false
					this.yhjman = item.man
					this.yhjjian = item.jian
					this.yhjtype = item.type
					this.yhjid = item.record_id
					
					if (this.id == '') {
						// 选中优惠券
						this.yjq_price()
					} else {
						// 选中优惠券 充值卡
						// this.deal_price()
						this.closeAmount1()
					}
				}
				
			},
			// 选中优惠券
			yjq_price() {
				let that = this
				let old_price = this.ticketData.selling_price
				if (Number(this.amount(this.money)) >= that.yhjman) {
					switch (that.yhjtype) {
						case 1:
							that.totalPrice = Number(that.amount(that.money - that.yhjjian))
							break;
						case 2:
							that.totalPrice = that.money - that.yhjjian;
							break;
						case 3:
							that.totalPrice = (that.money * that.yhjjian / 10).toFixed(2);
							break;
					}
				} else {
					this.yhj_qu = true
					return uni.showToast({
						title: "优惠卷不可使用",
						icon: "none",
					});
				}
			},
			// 选中充值卡
			jine_price() {
				// totalPrice  总计
				let that = this
				let ticket_total = that.ticketData.selling_price * that.pay_discount
				let train_total = that.money * that.pay_discount
				let old_price = this.ticketData.selling_price
				// 未选中优惠券
				// 选中充值卡
				if (that.account_balance >= train_total) {
					that.totalPrice = 0
				} else {
					that.totalPrice = that.amount(train_total - that.account_balance)
				}
			},
			// 选中优惠券 充值卡
			deal_price() {
				let that = this
				let old_price = this.ticketData.selling_price
				let train_total = that.money
				if (Number(this.amount(this.money)) >= this.yhjman) {
					// 培训
					let total_Price = Number(this.amount(train_total - this.yhjjian) * that.pay_discount)
					let zhe_Price = Number(this.amount((train_total * this.yhjjian) / 10) * that.pay_discount).toFixed(
						2)
					switch (that.yhjtype) {
						case 1:
							if (Number(that.account_balance) >= Number(total_Price)) {
								that.totalPrice = 0
							} else {
								that.totalPrice = that.amount(total_Price - that.account_balance)
							}
							break;
						case 2:
							if (Number(that.account_balance) >= Number(total_Price)) {
								that.totalPrice = 0
							} else {
								that.totalPrice = that.amount(total_Price - that.account_balance)
							}
							break;
						case 3:
							if (Number(that.account_balance) >= Number(zhe_Price)) {
								that.totalPrice = 0
							} else {
								that.totalPrice = that.amount(zhe_Price - that.account_balance)
							}
							break;
					}
				} else {
					return uni.showToast({
						title: "优惠卷不可使用",
						icon: "none",
					});
				}

			},
			//优惠卷
			async getMyCoupon() {
				let that = this;
				let other_param = {
					price_ids: that.price_id.toString(),
					time_ids: that.time_id.toString(),
					field_ids: that.field_id.toString(),
					price: that.price_list.toString(),
					court_id: that.selectionArr[0].court_id,
					meal_id: that.selectionArr[0].meal_id,
					field_type: that.field_type,
				}
				this.other_param = JSON.stringify(other_param)
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					status: 0,
					venue_id: this.venue_id,
					window_id: this.windows,
					goods_id: that.ticketData.id,
					order_type: 3,
					other_param: that.other_param,
					venue_id: that.selectionArr[0].venue_id,
				}
				let res = await market.getMyCoupon(postData);
				if (res.code == 1) {
					that.wrapperlist = res.data.result.data; //将数据拼接在一起
					// that.wrapperlist = that.wrapperlist.concat(res.data.result.data); //将数据拼接在一起
					// that.totalPage = res.data.result.last_page
					// this.total = res.data.result.total
				}
			},
			// 关闭优惠券
			closeCoupons1() {
				this.showCoupons = false;
				this.yhj_qu = true
				this.yhjman = ''
				this.yhjjian = ''
				this.yhjtype = ''
				this.yhjid = ''
				if (this.id != '') {
					// 选中充值卡
					this.jine_price()
				} else {
					this.totalPrice = this.money
				}
			},
			closeCoupons() {
				this.showCoupons = false;
			},
			async ss() {
				let datas = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
				};
				train.clearCacheAndDataBase(datas).then(result => {
					if (result.code == 1) {}
				})
			},
			// 关闭充值卡
			closeAmount1() {
				this.account_balance = ''
				this.showAmount = false;
				// this.money = ''
				// this.jingeka = ''
				this.id = ''
				this.jinqian = true
				this.goods_list = true
				
				if (this.yhjid != '') {
					// 选中充值卡
					this.yjq_price()
				} else {
					this.totalPrice = this.money
				}
			},
			// 金额卡
			jine(item) {
				this.yhj_qu = true
				this.yhjid = ''
				this.yhjman = ''
				this.yhjjian = ''
				this.yhjtype = ''
				let that = this;
				let str = item.pay_discount
				this.pay_discount = str / 100
				this.showAmount = false
				this.jinqian = false
				this.account_balance = item.account_balance
				this.id = item.id
				this.goods_list = false
				let ticket_total = that.ticketData.selling_price * that.pay_discount
				let train_total = that.money * that.pay_discount
				let old_price = this.ticketData.selling_price


				// 未选中优惠券
				if (this.yhjid == '') {
					// 选中充值卡
					this.jine_price()
				} else {
					// 选中优惠券 充值卡
					// this.deal_price()
					this.closeCoupons1()
				}
			},
			tabClick(e) {
				let that = this
				that.itemlist = [],
					that.not_use = e.index
				that.getPriceCardForPay();
			},
			closeAmount() {
				this.showAmount = false;
			},
			chong() {
				this.itemlist = []
				this.not_use = 0
				this.jek = true
				// this.getPriceCardForPay();
			},
			zhi() {
				this.itemlist = []
				this.not_use = 1
				this.jek = false
				// this.getPriceCardForPay();
			},
			// 获取金额卡
			async getPriceCardForPay() {
				let that = this
				that.itemlist = []
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// });
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					open_id: uni.getStorageSync("openid"),
					windows: this.windows,
					not_use: that.not_use,
					venue_id: this.selectionArr[0].venue_id,
				};
				let res = await venues.getPriceCardForPay(postData);
				if (res.code == 1) {
					this.itemlist = res.data.result
					// uni.hideLoading();
				}
			},

			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			amountFixed(value) {
				return parseFloat(value).toFixed(0);
			},
			async getShopTicket() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				let postData = {
					//goods_type: court
					// ticket_id: product_id
					ticket_id: this.selectionArr[0].product_id,
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					venue_id: this.selectionArr[0].venue_id,
					goods_type: 'court',
				};
				let res = await venues.getTicketDetail(postData);
				if (res.code == 1) {
					this.ticketData = res.data;
					// this.getPriceCardForPay();
					uni.hideLoading();
					this.getMyCoupon()
					this.closeCoupons1()
					this.closeAmount1()
				}
			},
			checkboxChange(e) {
				if (e.length == 0) {
					this.read_checked = false;
				} else {
					this.read_checked = true;
				}
			},
			submit() {
				if (this.read_checked == false) {
					return uni.showToast({
						title: "请先阅读购买须知",
						icon: "none",
					});
				}
				this.createOrder();

			},
			// 此时此刻会生成一个订单
			async createOrder() {
				// createOrder() {	
				var that = this;

				let projectArr = [];
				let venues_project = that.ticketData.venues_project.map((item) => {
					projectArr.push(item.name);
				});
				projectArr = projectArr.join(",");
				let order_type = 1;
				// let amount_payable = that.amount(
				// 	that.ticketData.selling_price * that.amountValue
				// );
				let goods_price = that.ticketData.selling_price;
				let goods_image = that.ticketData.show_img;
				let goods_amout = that.ticketData.selling_price;
				let student_info = "";
				let spec = "";
				let train_price = "";
				let other_param = {
					price_ids: that.price_id.toString(),
					time_ids: that.time_id.toString(),
					field_ids: that.field_id.toString(),
					price: that.price_list.toString(),
					court_id: that.selectionArr[0].court_id,
					meal_id: that.selectionArr[0].meal_id,
					field_type: that.field_type,
				}
				this.other_param = JSON.stringify(other_param)
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: that.$https.weixinAppId,
					owner: uni.getStorageSync("phone"),
					goods_type: 'court',
					amountValue: that.selectionlength,
					amount_payable: that.totalPrice,
					consumption_type: projectArr,
					goods_amount: that.totalPrice,
					goods_id: that.ticketData.id,
					pay_method: 1,
					purchase_route: 2,
					order_money: 0,
					goods_number: that.selectionlength,
					pay_wait_time: that.pay_wait_time,
					// class_id: that.class_id,
					goods_image: goods_image,
					order_type: 3,
					venue_id: that.selectionArr[0].pid,
					goods_price: that.price_list.toString(),
					goods_name: that.num_list.toString(),
					goods_amout: that.price_list.toString(),
					open_id: uni.getStorageSync("openid"),
					other_param: that.other_param,
					venue_id: that.selectionArr[0].venue_id,
					choose_date: that.selectionArr[0].current_month,
					time_ids: that.time_id.toString(),
					card_id: this.id,
					windows: this.windows,
					coupon_id: this.yhjid

				};
				let res = await venues.createOrder(params);
				if (res.code == 1) {
					this.datalist = res.data
					this.order_id = res.data.order_id
					if (res.data.need_pay >= '0.01') {
						var that = this
						if (uni.getStorageSync("buy_success_id") != '' && uni.getStorageSync("buy_success_id") !=
							null && uni.getStorageSync("buy_success_id") != undefined) {
							uni.requestSubscribeMessage({
								tmplIds: [uni.getStorageSync("buy_success_id")],
								success(ru) {
									uni.navigateTo({
										url: "/page_venues/pages/venuesDetail/pay/pay?amount=" + that.datalist.need_pay +
											"&payWaitTime=" + that.payWaitTime + "&order_id=" + that.order_id + "&orderid=" +
											that.datalist.orderid + "&order_type=" + 3 + "&belong=" + 'court' + "&chaoshitype=" + 2 +
											"&card_id=" + that.id + "&coupon_id=" + that.yhjid+ "&goods_id=" + that.ticketData.id + "&venue_id=" + that.selectionArr[0].venue_id,
									});
								}
							})
						} else {
							uni.navigateTo({
								url: "/page_venues/pages/venuesDetail/pay/pay?amount=" + that.datalist.need_pay +
									"&payWaitTime=" + that.payWaitTime + "&order_id=" + that.order_id + "&orderid=" +
									that.datalist.orderid + "&order_type=" + 3 + "&belong=" + 'court' + "&chaoshitype=" + 2 +
									"&card_id=" + that.id + "&coupon_id=" + that.yhjid+ "&goods_id=" + that.ticketData.id + "&venue_id=" + that.selectionArr[0].venue_id,
							});
						}

					} else {
						this.moniPay()
					}

				} else {
					uni.showModal({
						title: res.info,
						// 提示文字
						// content: '是否取消订单？',
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "我知道了",
						//删除字体的颜色 
						confirmColor: '#000000',
						//取消字体的颜色
						cancelColor: '#999',
						success: function(res) {

						}
					})
				}
				// else {
				// 	if (res.info == '你尚有未付款卡，请先支付') {
				// 		uni.showModal({
				// 			title: res.info,
				// 			// 提示文字
				// 			// content: '是否取消订单？',
				// 			// 取消按钮的文字自定义
				// 			cancelText: "取消",
				// 			// 确认按钮的文字自定义
				// 			confirmText: "我知道了",
				// 			//删除字体的颜色 
				// 			confirmColor: '#000000',
				// 			//取消字体的颜色
				// 			cancelColor: '#999',
				// 			success: function(res) {
				// 				if (res.confirm) {
				// 					// 执行确认后的操作
				// 					uni.navigateTo({
				// 						url: '/pages/personal/orders/orders?tab=1',
				// 					});
				// 				}
				// 			}
				// 		})
				// 	} else if (res.info == '你尚有未付款门票，请先支付') {
				// 		uni.showModal({
				// 			title: res.info,
				// 			// 提示文字
				// 			// content: '是否取消订单？',
				// 			// 取消按钮的文字自定义
				// 			cancelText: "取消",
				// 			// 确认按钮的文字自定义
				// 			confirmText: "我知道了",
				// 			//删除字体的颜色 
				// 			confirmColor: '#000000',
				// 			//取消字体的颜色
				// 			cancelColor: '#999',
				// 			success: function(res) {
				// 				if (res.confirm) {
				// 					uni.navigateTo({
				// 						url: '/pages/personal/orders/orders?tab=1',
				// 					});
				// 				}
				// 			}
				// 		})
				// 	} else {
				// 		uni.showModal({
				// 			title: res.info,
				// 			// 提示文字
				// 			// content: '是否取消订单？',
				// 			// 取消按钮的文字自定义
				// 			cancelText: "取消",
				// 			// 确认按钮的文字自定义
				// 			confirmText: "我知道了",
				// 			//删除字体的颜色 
				// 			confirmColor: '#000000',
				// 			//取消字体的颜色
				// 			cancelColor: '#999',
				// 			success: function(res) {

				// 			}
				// 		})
				// 	}
				// }
				// this.moniPay()
				// uni.navigateTo({
				// 	url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
				// 		that.money +
				// 		"&payWaitTime=" +
				// 		that.pay_wait_time +
				// 		"&venue_id=" +
				// 		that.selectionArr[0].pid +
				// 		"&order_id=" +
				// 		res.data.order_id +
				// 		"&project=" +
				// 		projectArr +
				// 		"&order_type=" +
				// 		3 +
				// 		"&classNum=" +
				// 		this.classNum +
				// 		"&train_price=" +
				// 		that.money,
				// });
				// }
			},
			// /sass-test/public/index.php/api/court/moniPay
			async moniPay() {
				var nowdate = new Date().valueOf();
				var that = this;
				let params = {
					open_id: uni.getStorageSync("openid"),
					project_id: getApp().globalData.projectId,
					app_id: that.$https.weixinAppId,
					out_trade_no: that.order_id,
					payer_total: 0,
					add_time: nowdate,
					transaction_id: 'ZF001',
					goods_type: 'court',
					order_type: 3,
					attach: that.projectArr,
					goods_id: that.ticketData.id,
					card_id: this.id,
					coupon_id: this.yhjid,
					open_id: uni.getStorageSync("openid"),
				};
				let res = await venues.moniPay(params);
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/personal/personal?backUp=1'
					})

				}
			},
			// async moniPay() {
			// 	var nowdate = new Date().valueOf();
			// 	var that = this;
			// 	let params = {
			// 		project_id: getApp().globalData.projectId,
			// 		app_id: that.$https.weixinAppId,
			// 		out_trade_no: that.order_id,
			// 		payer_total: that.money,
			// 		add_time: nowdate,
			// 		transaction_id: 'ZF001',
			// 		order_type: 'court'
			// 	};
			// 	let res = await venues.moniPay(params);
			// 	if (res.code == 1) {
			// 		uni.reLaunch({
			// 			url: '/pages/personal/personal'
			// 		})

			// 	}
			// },
			timeConfirm(data) {
				this.timeValue = data.value;
				this.showTime = false;
			},
			closeCoupons() {
				this.showCoupons = false;
			},
			closeAmount() {
				this.showAmount = false;
			},
			closeInfo() {
				this.showInfo = false;
			},
			valChange(e) {
				this.amountValue = e.value;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		background-color: #f3f3f3;
		padding: 0px 30rpx;
		padding-top: 30rpx;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5af2e5b772f1e1c1eb7d3bfabe9cdc4838551525.png");
		background-repeat: no-repeat;
		background-position: 0% -200rpx;
		position: relative;
		background-size: 100% auto;

		.section-1 {
			width: 100%;
			border-radius: 7px;

			.tab-list {
				display: flex;
				align-items: flex-end;

				.tab {
					flex: 1;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
					height: 60rpx;
					text-align: center;
					position: relative;

					background-color: rgba(199, 218, 254, 1);

					&:first-of-type {
						border-radius: 7px 0 0 0;
						border-bottom-left-radius: 0 !important;
					}

					&:last-of-type {
						border-radius: 0px 7px 0 0;
					}

					&:first-of-type:before {
						content: "";
						display: block;
						position: absolute;
						right: -20rpx;
						z-index: 1;
						bottom: 0;
						border-top: 30rpx solid transparent;
						border-bottom: 30rpx solid white;
						border-left: 10rpx solid white;
						border-right: 10rpx solid transparent;
					}

					&:last-of-type:before {
						content: "";
						display: block;
						position: absolute;
						left: -20rpx;
						z-index: 1;
						bottom: 0;
						border-top: 30rpx solid transparent;
						border-bottom: 30rpx solid white;
						border-left: 10rpx solid transparent;
						border-right: 10rpx solid white;
					}
				}

				.active {
					font-weight: bold;
					color: black;
					background-color: white;
					border-radius: 7px 7px 0 7px !important;
					height: 72rpx;
				}
			}

			.tab-con {
				background-color: white;
				padding: 0px 30rpx;
				box-sizing: border-box;
				border-radius: 0px 0px 7px 7px;
				position: relative;
				padding-bottom: 25rpx;

				&::before {
					position: absolute;
					width: calc(100% - 43rpx);
					right: 0;
					margin: auto;
					bottom: 0px;
					left: 0;
					height: 3px;
					background-image: repeating-linear-gradient(-45deg,
							#357afb 0,
							#357afb 20%,
							transparent 0,
							transparent 25%,
							#ff6a7c 0,
							#ff6a7c 45%,
							transparent 0,
							transparent 50%);
					background-size: 80px;
					content: "";
				}

				.tab-item1 {
					.kong {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 90%;
						font-size: 21rpx;
						color: #999999;

						image {
							width: 200rpx;
						}
					}

					.title {
						font-size: 20rpx;
						font-weight: 500;
						margin-bottom: 20rpx;
						color: #333333;

						/deep/ .u-tag {
							height: 34rpx;
							margin-right: 20rpx !important;
						}
					}

					.adress {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
					}

					.info {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 25rpx;
					}
				}

				.tab-item2 {
					padding-top: 30rpx;

					.info-1 {
						font-size: 22rpx;
						font-weight: 500;
						color: #333333;
						margin-bottom: 20rpx;
					}

					.info-2 {
						font-size: 30rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 18rpx;
					}

					.info-3 {
						font-size: 22rpx;
						color: #333333;
						margin-bottom: 30rpx;

						text {
							margin-right: 7rpx;
						}
					}

					.cell {
						border-top: 1px solid #efefef;
						padding: 35rpx 0;

						.label {
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
						}

						.value {
							font-size: 26rpx;
							color: #000000;
							margin-right: 15rpx;
						}
					}
				}
			}
		}

		.section-2 {
			padding: 40rpx 30rpx;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px 7px 0px 0px;


			.title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
			}

			.goods {
				.footer-3 {
					display: flex;
					margin-bottom: 30rpx;

					.item {
						background: #F3F3F3;
						border-radius: 5px;
						flex-shrink: 0;
						width: fit-content;
						margin-top: 20rpx;
						margin-right: 40rpx;
						position: relative;

						.icon {
							position: absolute;
							top: -14rpx;
							right: -14rpx;
						}

						.item-time {
							font-size: 22rpx;
							background: #DF42D9;
							color: #FFFFFF;
							text-align: center;
							padding: 5rpx 0;
							border-radius: 5px 5px 0 0;
						}

						.item-con {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							padding: 16rpx;
							font-size: 22rpx;
							font-weight: bold;

							.item-con1 {

								color: #333333;
								margin-bottom: 15rpx;
							}

							.item-con2 {
								color: #DF42D9;
							}
						}
					}
				}

				.con {
					height: 150rpx;

					.image {
						width: 150rpx;
						height: 100%;

						/deep/ .vue-ref {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						margin-left: 30rpx;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-between;

						.info-1 {
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
							margin-bottom: 10rpx;
						}

						.info-2 {
							background-color: #efefef;
							font-size: 22rpx;
							border-radius: 5rpx;
							color: #a6a6a6;
							padding: 5rpx 20rpx;
						}

						.info-3 {
							font-size: 22rpx;
							font-weight: 500;
							color: #ff4105;

							text {
								font-size: 28rpx;
								font-weight: 700;
							}
						}
					}
				}

				/deep/ .u-number-box {
					.u-number-box__minus,
					.u-number-box__plus,
					.u-number-box__input {
						width: 45rpx !important;
						font-size: 24rpx !important;
						height: 45rpx !important;

						text {
							font-size: 24rpx !important;
						}
					}

					.u-number-box__input {
						background-color: transparent !important;
					}
				}
			}
		}

		.section-3 {
			padding: 10rpx 30rpx 40rpx 30rpx;
			// margin-top: 20rpx;
			background-color: white;
			border-radius: 0px 0px 7px 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 22rpx;
				font-weight: 500;
				color: #ff4105;

				text {
					font-weight: 700;
					font-size: 28rpx;
				}
			}
		}

		.section-4 {
			padding: 40rpx 30rpx;
			margin-top: 20rpx;
			background-color: white;
			border-radius: 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 26rpx;
				color: #bebebe;
				margin-left: 30rpx;
			}

			.active {
				color: #ff4105 !important;
			}

			.info-3 {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				margin-right: 10rpx;
			}
		}

		.section-5 {
			position: absolute;
			bottom: 134rpx;

			.info-1 {
				font-size: 32rpx;
				font-weight: 500;
				color: #999999;
			}

			.info-2 {
				color: #2f75fa;
			}

			// .u-checkbox__icon-wrap{
			// 	width: 50rpx;
			// 	height: 50rpx;
			// }
			// /deep/.u-checkbox-group {


			// }
		}

		.footer {
			background: #ffffff;
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;

			.footer-1 {
				font-size: 28rpx;
				color: #333333;

				.info {
					font-size: 22rpx;
					color: #ff4105;

					text {
						font-weight: 700;
						font-size: 34rpx;
					}
				}
			}

			.footer-btn {
				padding: 20rpx 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #ffffff;
				background: linear-gradient(0deg, #528eff, #2f75fa);
				border-radius: 40rpx;
			}
		}

		.store-popup {
			padding: 20rpx 0;

			// .list {
			.scroll-view_H {}

			.item {
				margin-top: 30rpx;

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}

					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}

			// }
			.title {
				padding: 0px 30rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #cccccc;
				font-weight: bold;

				.clo {
					color: #2f75fa;
				}
			}



			.list-1 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;

				.item {
					margin-top: 30rpx;
					height: 200rpx;
					padding: 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: #ffeae9;
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						border-right: 1px dashed #ff1c1c;
						justify-content: center;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							top: -15rpx;
							right: -15rpx;
						}

						&::after {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							bottom: -15rpx;
							right: -15rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #ff1c1c;

							text {
								font-size: 40rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: #ff1c1c;
							margin-top: 10rpx;
						}
					}

					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}

						.info-2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #bebebe;
							margin-top: 20rpx;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}

			.list-12 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;

				.item {
					margin-top: 30rpx;
					height: 100rpx;
					padding: 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: #ffeae9;
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						border-right: 1px dashed #ff1c1c;
						justify-content: center;
						position: relative;

						&::before {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							top: -15rpx;
							right: -15rpx;
						}

						&::after {
							position: absolute;
							content: "";
							width: 30rpx;
							height: 30rpx;
							background-color: white;
							border-radius: 50%;
							bottom: -15rpx;
							right: -15rpx;
						}

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #ff1c1c;

							text {
								font-size: 40rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: #ff1c1c;
							margin-top: 10rpx;
						}
					}

					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}

						.info-2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #bebebe;
							margin-top: 20rpx;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}

			.list-2 {
				height: 50vh;
				overflow: auto;
				padding-bottom: 30rpx;

				.item {
					margin-top: 30rpx;
					height: 222rpx;
					padding: 0px 30rpx;
					overflow: hidden;

					.item-1 {
						background: rgba(47, 117, 250, 0.2);
						width: 35%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #2f75fa;

							text {
								font-size: 50rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: rgba(47, 117, 250, 0.6);
							margin-top: 10rpx;
						}
					}

					.item-11 {
						background: #ccccce;
						width: 30%;
						height: 100%;
						display: flex;
						border-radius: 9px 0 0 9px;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.price {
							font-size: 26rpx;
							font-weight: 500;
							color: #6c6c6c;

							text {
								font-size: 40rpx;
								font-weight: 700;
							}
						}

						.price-1 {
							font-size: 22rpx;
							font-weight: bold;
							color: #6c6c6c;
							margin-top: 10rpx;
						}
					}


					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
							margin-bottom: 10rpx;
						}

						.info-2 {
							font-size: 24rpx;
							margin-bottom: 8rpx;
							color: #bebebe;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}

			.btn {
				padding: 0px 30rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>